import React, { Component } from 'react';
// import Header from '@/components/Header';
import Banner from './Banner';
// import Demo from '@/components/ListIndex'
import { NavBar, Toast } from 'antd-mobile';
import store from '@/store'
class Com extends Component {
  componentDidMount () {
    this.props.getTopList()
    this.updataList('要闻')
    //--点击回到头部---刷新-------
    document.querySelector('.am-navbar-title').onclick = () => {
      const timer = setInterval(() => {
        let top = document.querySelector('.homebox').scrollTop
        document.querySelector('.homebox').scrollTop = top - top/8
        if( top === 0 ) {
          clearInterval(timer)
          this.updataList (store.getState().home.title)
        }
      },30)
    }
  }

  updataList (item) {
    this.props.updataList(item)
    document.querySelector('.homebox').scrollTop = 0
    Toast.loading('加载中...');
  }
  goDetail (item) {
    // console.log(item.newsId)
    this.props.goDetail(item)
  }
  goUser () {
    this.props.goUser()
  }
  loadMore () {
      console.log(this)
      Toast.loading('加载中...')
      this.props.loadMore()
  }
  render () {
    return (
      <div className ="container">
        <div className = "header">
          <NavBar
            mode="dark"
            rightContent={[
              // <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
              <p className = "iconfont icon-iconwode" key="0" onClick = {this.goUser.bind(this)} ></p>,
            ]}
          >新浪新闻</NavBar>
        </div>
        <div className = "topList-box">
            <ul className = "topList">
              {
                this.props.topList.map((item, index) => {
                  if(store.getState().home.title === item){
                    // console.log(item)
                    return (
                      <li key = {index} className="underLine"> {item} </li>
                    )
                  } else {
                    return (
                      <li key = {index} onClick = {this.updataList.bind(this,item)}> {item} </li>
                    )
                  }
                })
              }
            </ul>
        </div>
        <div className= "homebox">
              <Banner />
              <ul className = "newsList">
              {
                this.props.newsList.map((item, index) => {
                  return (
                    <li className = "newsOne" key={index} onClick = {this.goDetail.bind(this,item)}>
                      <div className="newsAbout">
                        <div className = "newsTitle">
                          {item.title}
                          {/* {console.log(item)} */}
                        </div>
                        <div className = "newsPublish">
                          <p className = "publishTime">
                          {
                            item.publishTime
                          }
                          </p>
                          {/* <a href = "javascript:;"> */}
                          <p className = "publishFrom">
                          {
                            item.source
                          }
                          </p>
                          {/* </a> */}
                        </div>
                      </div>
                      <div className = "newsImg">
                        <img src={item.newsImg} alt={item.newsImg} />
                      </div>
                    </li>
                  )
                })
              }
              </ul>
              <div onClick={() => {this.props.loadMore()}} className="loadMoreBtn">
                加载更多。。
              </div>
        </div>
      </div>
    )
  }
}
export default Com